<template>
  <div class="container">
    <Breadcrumb :items="['menu.produce', 'menu.visualization.attendance']" />
    <a-card direction="vertical" :size="12" fill>
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="number" label="选择月份">
                  <a-month-picker
                    value-format="YYYY-MM"
                    placeholder="请选择月份"
                    @change="onMonthChange"
                    v-model="formModel.month"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-button type="primary" v-print="print">打印</a-button>
              </a-col></a-row
            >
          </a-form>
        </a-col>
      </a-row>
      <table width="100%" id="printContent" cellspacing="0px">
        <tr>
          <td
            colspan="5"
            style="
              text-align: center;
              font-size: 20px;
              font-weight: bold;
              color: black;
            "
            >吕梁酒厂生产科考勤表</td
          >
        </tr>
        <tr>
          <td width="100">日期</td>
          <td colspan="2">上午</td>
          <td colspan="2">下午</td>
        </tr>
        <tr v-for="(item, i) in dayArray" :key="i">
          <td>{{ item }}</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>天数确认</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td>签字确认</td>
          <td colspan="4"></td>
        </tr>
      </table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref } from 'vue';
const formModel = ref({
  month: '',
});
const columns = ref([
  {
    title: '吕梁酒厂生产科考勤表',
    dataIndex: 'name',
    fixed: 'left',
    children: [
      {
        title: '日期',
        dataIndex: 'dateInfo',
        width: 100,
      },
      {
        title: '上午',
        dataIndex: 'morning',
        children: [{ dataIndex: 'morning1' }, { dataIndex: 'morning2' }],
      },
      {
        title: '下午',
        dataIndex: 'afternoon',
        children: [{ dataIndex: 'afternoon1' }, { dataIndex: 'afternoon2' }],
      },
    ],
  },
]);

const data = ref([
  {
    dateInfo: '2月20日',
    morning1: '12',
    morning2: '12',
    afternoon1: '12',
    afternoon2: '12',
  },
]);

const dayArray = ref([]);
const onMonthChange = (value) => {
  let beginMonth = dayjs(value).subtract(1, 'month').format('YYYY-MM');
  const startDate = dayjs(`${beginMonth}-26`);
  const endDate = dayjs(`${value}-25`);
  const dates = Array.from(
    new Array(endDate.diff(startDate, 'day') + 1),
    (x, i) => startDate.add(i, 'day').format('MM月DD日')
  );
  dayArray.value = dates;
};
const print = ref({
  id: 'printContent',
  popTitle: '', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '打印预览', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); console.log( this) }, // 预览窗口打开之前的callback
  previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
  openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
  closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted () { console.log('点击v-print绑定的按钮了！') },
  // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
  // asyncUrl (reslove) {
  //   setTimeout(() => {
  //     reslove('http://localhost:8080/')
  //   }, 2000)
  // },
  standard: '',
  extarCss: ''
})
const printAttendance = () => {
  let newstr = document.getElementById("printContent").innerHTML;
	let oldstr = document.body.innerHTML;
	document.body.innerHTML = newstr;
	window.print();
	document.body.innerHTML = oldstr;
	return false;
}

const initDayInfo = () => {
  let beginMonth = dayjs().format('YYYY-MM');
  formModel.value.month = beginMonth;
  onMonthChange(beginMonth);
};
initDayInfo();
</script>

<style scoped lang="less">
table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #ccc;
  text-align: center;
}
td {
  padding-top: 7px;
  padding-bottom: 5px;
  color: black;
}
.container {
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
.space-unit {
  background: white;
}
</style>